<template>
  <div class="panel-wrap">
    <div class="panel-title">网格</div>
    <a-row align="middle">
      <a-col :span="16" :offset="6">
        <a-checkbox
          :checked="globalGridAttr.visible"
          @change="
            (e) => {
              globalGridAttr.visible = e.target.checked
            }
          "
        >
          显示网格
        </a-checkbox>
      </a-col>
    </a-row>
    <template v-if="globalGridAttr.visible">
      <a-row align="middle">
        <a-col :span="6">网格类型</a-col>
        <a-col :span="16">
          <a-select style="width: 100%" v-model="globalGridAttr.type">
            <a-select-option :value="GRID_TYPE.DOT">点</a-select-option>
            <a-select-option :value="GRID_TYPE.MESH">网格</a-select-option>
            <a-select-option :value="GRID_TYPE.DOUBLE_MESH">双网格</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">网格大小</a-col>
        <a-col :span="12">
          <a-slider :min="1" :max="20" :step="1" v-model="globalGridAttr.size" />
        </a-col>
        <a-col :span="4">
          <div class="result">{{ globalGridAttr.size }}</div>
        </a-col>
      </a-row>

      <a-row align="middle">
        <a-col :span="6">颜色</a-col>
        <a-col :span="16">
          <c-color-picker v-model="globalGridAttr.color" />
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">粗细</a-col>
        <a-col :span="12">
          <a-slider :min="0.5" :max="10" :step="0.5" v-model="globalGridAttr.thickness" />
        </a-col>
        <a-col :span="4">
          <div class="result">{{ globalGridAttr.thickness.toFixed(1) }}</div>
        </a-col>
      </a-row>
      <div v-if="globalGridAttr.type === 'doubleMesh'">
        <a-row align="middle">
          <a-col :span="6">次网颜色</a-col>
          <a-col :span="16">
            <a-input type="color" v-model="globalGridAttr.colorSecond" style="width: 100%" />
          </a-col>
        </a-row>
        <a-row align="middle">
          <a-col :span="6">次网粗细</a-col>
          <a-col :span="12">
            <a-slider :min="0.5" :max="10" :step="0.5" v-model="globalGridAttr.thicknessSecond" />
          </a-col>
          <a-col :span="4">
            <div class="result">{{ globalGridAttr.thicknessSecond.toFixed(1) }}</div>
          </a-col>
        </a-row>
        <a-row align="middle">
          <a-col :span="6">次网倍率</a-col>
          <a-col :span="12">
            <a-slider :min="1" :max="10" :step="1" v-model="globalGridAttr.factor" />
          </a-col>
          <a-col :span="4">
            <div class="result">{{ globalGridAttr.factor }}</div>
          </a-col>
        </a-row>
      </div>
    </template>

    <div class="panel-title">背景</div>
    <a-row align="middle">
      <a-col :span="6">颜色</a-col>
      <a-col :span="16">
        <c-color-picker v-model="globalGridAttr.bgColor" />
      </a-col>
    </a-row>
    <a-row align="middle">
      <a-col :span="16" :offset="6">
        <a-checkbox
          :checked="globalGridAttr.showImage"
          @change="
            (e) => {
              globalGridAttr.showImage = e.target.checked
            }
          "
        >
          显示Logo
        </a-checkbox>
      </a-col>
    </a-row>
    <div v-if="globalGridAttr.showImage">
      <!-- <a-row align="middle">
        <a-col :span="6">平铺方式</a-col>
        <a-col :span="16">
          <a-select style="width: 100%" v-model="globalGridAttr.repeat">
            <a-select-option :value="REPEAT_TYPE.NO_REPEAT">不重复</a-select-option>
            <a-select-option :value="REPEAT_TYPE.REPEAT">重复</a-select-option>
            <a-select-option :value="REPEAT_TYPE.REPEAT_X">X轴重复</a-select-option>
            <a-select-option :value="REPEAT_TYPE.REPEAT_Y">Y轴重复</a-select-option>
            <a-select-option :value="REPEAT_TYPE.ROUND"> 环绕</a-select-option>
            <a-select-option :value="REPEAT_TYPE.SPACE">间隔</a-select-option>
            <a-select-option :value="REPEAT_TYPE.FLIPX">X轴翻转</a-select-option>
            <a-select-option :value="REPEAT_TYPE.FLIPY">Y轴翻转</a-select-option>
            <a-select-option :value="REPEAT_TYPE.FLIPXY">XY轴翻转</a-select-option>
            <a-select-option :value="REPEAT_TYPE.WATERMARK">水印</a-select-option>
          </a-select>
        </a-col>
      </a-row> -->
      <div v-if="globalGridAttr.repeat === 'watermark'">
        <a-row align="middle">
          <a-col :span="6">角度</a-col>
          <a-col :span="12">
            <a-slider :min="0" :max="360" :step="1" v-model="globalGridAttr.angle" />
          </a-col>
          <a-col :span="4">
            <div class="result">{{ globalGridAttr.angle }}</div>
          </a-col>
        </a-row>
      </div>

      <a-row align="middle">
        <a-col :span="6">位置</a-col>
        <a-col :span="16">
          <a-select style="width: 100%" v-model="globalGridAttr.position">
            <a-select-option value="center">中间</a-select-option>
            <a-select-option value="left">左</a-select-option>
            <a-select-option value="right">右</a-select-option>
            <a-select-option value="top">顶部</a-select-option>
            <a-select-option value="bottom">底部</a-select-option>
            <!-- <a-select-option value="50px 50px">50px 50px</a-select-option>
              <a-select-option :value="JSON.stringify({ x: 50, y: 50 })"> {`{ x: 50, y: 50 }`} </a-select-option> -->
          </a-select>
        </a-col>
      </a-row>
      <!-- <a-row align="middle">
        <a-col :span="6">大小</a-col>
        <a-col :span="16">
          <a-select style="width: 100%" v-model="globalGridAttr.bgSize">
            <a-select-option value="auto auto">默认</a-select-option>
            <a-select-option value="cover">覆盖</a-select-option>
            <a-select-option value="contain">包含</a-select-option>
            <a-select-option value="30px 30px">30px</a-select-option>
            <a-select-option value="100% 100%">100%</a-select-option>
            <a-select-option :value="JSON.stringify({ width: 150, height: 150 })">150px</a-select-option>
            <a-select-option value="100px 100px">100</a-select-option>
            <a-select-option value="30px 30px">50</a-select-option>
            <a-select-option value="150px 150px">150</a-select-option>
          </a-select>
        </a-col>
      </a-row> -->
      <a-row align="middle">
        <a-col :span="6">大小</a-col>
        <a-col :span="12">
          <a-slider :min="20" :max="300" :step="5" v-model="globalGridAttr.bgSize" />
        </a-col>
        <a-col :span="4">
          <div class="result">{{ globalGridAttr.bgSize }}</div>
        </a-col>
      </a-row>
      <a-row align="middle">
        <a-col :span="6">透明度</a-col>
        <a-col :span="12">
          <a-slider :min="0.05" :max="1" :step="0.05" v-model="globalGridAttr.opacity" />
        </a-col>
        <a-col :span="4">
          <div class="result">{{ globalGridAttr.opacity.toFixed(2) }}</div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { gridOpt, backGroundOpt, gridSizeOpt } from './method'

const GRID_TYPE_ENUM = {
  DOT: 'dot',
  FIXED_DOT: 'fixedDot',
  MESH: 'mesh',
  DOUBLE_MESH: 'doubleMesh'
}
const REPEAT_TYPE_ENUM = {
  NO_REPEAT: 'no-repeat',
  REPEAT: 'repeat',
  REPEAT_X: 'repeat-x',
  REPEAT_Y: 'repeat-y',
  ROUND: 'round',
  SPACE: 'space',
  FLIPX: 'flipX',
  FLIPY: 'flipY',
  FLIPXY: 'flipXY',
  WATERMARK: 'watermark'
}
export default {
  name: 'Index',
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      required: true
    }
  },
  data() {
    return {
      GRID_TYPE: GRID_TYPE_ENUM,
      REPEAT_TYPE: REPEAT_TYPE_ENUM
    }
  },
  mounted() {
    gridOpt(this.globalGridAttr)
    gridSizeOpt(this.globalGridAttr)
    backGroundOpt(this.globalGridAttr)
  },
  computed: {
    gridOptCpt() {
      return {
        type: this.globalGridAttr.type,
        color: this.globalGridAttr.color,
        thickness: this.globalGridAttr.thickness,
        thicknessSecond: this.globalGridAttr.thicknessSecond,
        colorSecond: this.globalGridAttr.colorSecond,
        factor: this.globalGridAttr.factor,
        visible: this.globalGridAttr.visible
      }
    },
    gridSizeOptCpt() {
      return {
        size: this.globalGridAttr.size
      }
    },
    backGroundOpt() {
      return {
        bgColor: this.globalGridAttr.bgColor,
        showImage: this.globalGridAttr.showImage,
        repeat: this.globalGridAttr.repeat,
        angle: this.globalGridAttr.angle,
        bgSize: this.globalGridAttr.bgSize,
        position: this.globalGridAttr.position,
        opacity: this.globalGridAttr.opacity
      }
    }
  },
  watch: {
    // 监听网格变化
    gridOptCpt: {
      handler(nv) {
        gridOpt(nv)
      },
      immediate: false,
      deep: false
    },
    // 监听网格大小变化
    gridSizeOptCpt: {
      handler(nv) {
        gridSizeOpt(nv)
      },
      immediate: false,
      deep: false
    },
    // 监听背景变化
    backGroundOpt: {
      handler(nv) {
        backGroundOpt(nv)
      },
      immediate: false,
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';
</style>
